import * as React from "react";
import { Table, message, Spin, Modal, Space, Typography } from "antd"; //columnsDataCLass
import { SearchState } from "../Search";
import { getDeviceSetData, deleteSetData } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
import IconFont from "../../../../../../assets/ICON";
import moment from "moment";
import ModalUpdata from "../ModalUpdata";
const { Text } = Typography;
export interface SearchTableProps {
  condition: SearchState;
}

export interface SearchTableState {
  pageSize: number;
  pageIndex: number;
  total: number;
  loading: boolean;
  isModalVisible: boolean;
  device: any;
}

interface ColumnsData {
  title: string;
  dataIndex: string;
  key: string;
  render?: (text: string, record: any) => any;
}
class SearchTable extends React.Component<SearchTableProps, SearchTableState> {
  private columns: ColumnsData[] = [
    {
      title: "设备编号",
      dataIndex: "no",
      key: "no",
    },
    {
      title: "设备名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "阀值详情",
      dataIndex: "details",
      key: "details",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      render: (text: string) => {
        if (text) {
          return moment(text).format("YYYY-MM-DD");
        } else {
          return <>——</>;
        }
      },
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      render: (text: string, record: any) => {
        return (
          <Space size={26}>
            <span
              style={{ cursor: "pointer" }}
              onClick={() => {
                // this.Mod = "updata";
                this.onEdit(record);
              }}
            >
              <IconFont type="icon_form_bianji" style={{ color: "#FBB10B" }} />
              <Text>编辑</Text>
            </span>

            <span
              style={{ cursor: "pointer" }}
              onClick={() => {
                this.onDelete(record);
              }}
            >
              <IconFont type="icon_form_shanchu" style={{ color: "#FF6B6B" }} />
              <Text>删除</Text>
            </span>
          </Space>
        );
      },
    },
  ];
  private DataSouce: any[] = [];
  state = {
    pageSize: 10,
    pageIndex: 1,
    total: 0,
    loading: false,
    isModalVisible: false, //编辑框
    device: null,
  };
  render() {
    let { pageSize, total, loading, isModalVisible, device } = this.state;
    return (
      <div className="rowcon_body" style={{ marginTop: 16 }}>
        <Spin spinning={loading}>
          <Table
            columns={this.columns}
            dataSource={this.DataSouce}
            pagination={{
              pageSize: pageSize,
              total: total,
              current: this.state.pageIndex,
              onChange: (page: number) => {
                this.setState({ pageIndex: page });
                this.getPream();
              },
            }}
            // scroll={{ y: 300, x: 1500 }}
            sticky
          />
        </Spin>
        <ModalUpdata
          visible={isModalVisible}
          device={device}
          onCancel={(bren: boolean) => {
            this.handleCancel(bren);
          }}
          onOk={(bren: boolean) => {
            this.handleOk(bren);
          }}
        />
      </div>
    );
  }
  componentWillMount() {
    this.getDataSouce(this.props.condition);
  }
  shouldComponentUpdate(
    newProps: SearchTableProps,
    newState: SearchTableState
  ) {
    if (newProps.condition !== this.props.condition) {
      this.getDataSouce(newProps.condition);
    }
    return true;
  }
  /**主动操作 */
  //关闭弹窗
  handleCancel(bren: boolean) {
    this.setState({ isModalVisible: bren });
  }
  handleOk(bren: boolean) {
    this.setState({ isModalVisible: bren, pageIndex: 1 });
    this.getPream();
  }
  onEdit(record: any) {
    this.setState({ isModalVisible: true, device: record });
  }
  onDelete(record: any) {
    let pream = { deviceId: record.deviceId };
    let _this = this;
    Modal.confirm({
      title: "是否确认删除设备阀值设置",
      onOk: () => {
        _this.delete(pream);
      },
    });
  }
  /**请求数据，参数设置 */
  //参数
  getPream() {
    this.getDataSouce(this.props.condition);
  }

  //请求设备阀值设置分页
  async getDataSouce(condition: any) {
    let { pageSize, pageIndex } = this.state;
    let pream = {
      deviceName: condition.likeStr,
      pageIndex,
      pageSize,
    };
    let _this = this;
    this.setState({ loading: true });
    let res: any = await getDeviceSetData(JSON.stringify(pream)).catch(
      (err) => {
        message.error(err);
        this.setState({ loading: false });
      }
    );
    let json: AjaxData = res;
    if (json.success) {
      this.DataSouce = json.data.records;
      this.setState({ total: json.data.total, loading: false });
      this.forceUpdate();
    } else {
      Modal.error({
        title: res.message,
        onOk() {
          _this.setState({ loading: false });
        },
      });
    }
  }
  async delete(pream: { deviceId: string }) {
    let res: any = await deleteSetData(JSON.stringify(pream)).catch((err) => {
      message.error(err);
    });
    let json: AjaxData = res;
    if (json.success) {
      this.getPream();
    }
  }
}

export default SearchTable;
